<template>
  <div class="box">
    <div class="supplier_store">
      <div class="head">
        <!-- <div class="addgoods" @click="suppliergoods()">
          全 部<br />
          商 品
        </div> -->
        <!-- //供应商列表 -->
        <el-scrollbar :vertical="false" class="scroll-container">
          <div
            class="item"
            v-for="item in supplierlist"
            :item="item"
            :key="item.mer_id"
            @click="suppliergoods(item.mer_id)"
            :class="supplierclass == item.mer_id ? 'supplierclass' : ''"
          >
            <div><img :src="item.mer_avatar" /></div>
            <span>{{ item.mer_name }}</span>
          </div>
        </el-scrollbar>
      </div>
      <!-- 分类 -->
      <div class="cate">
        <div class="item">
          <span class="cate-head">商品分类：</span>
          <el-select
            v-model="value"
            clearable
            placeholder="所有分类"
            @change="btncate(value)"
            class="scroll_cate"
          >
            <el-option
              v-for="item in suppliercate"
              :key="item.store_category_id"
              :label="item.cate_name"
              :value="item.cate_name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="item">
          <span class="cate-head">供货商：</span>
          <el-input
            v-model="supplierFrom.name"
            placeholder="请输入供货商名称"
            class="selWidth"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              class="el-button-solt"
              @click="getsupplier(1)"
            />
          </el-input>
        </div>
        <div class="item">
          <el-button type="primary" @click="suppliergoods()"
            >全部商品</el-button
          >
          <el-button type="primary" @click="addbtn">加入我的店</el-button>
        </div>
      </div>
      <!-- 商品 -->
      <div class="goods">
        <ul>
          <li :class="checkclass == 0 ? 'cheke' : ''" @click="sort('', 0)">
            默认
          </li>
          <li
            :class="checkclass == 1 ? 'cheke' : ''"
            @click="sort('is_new', 1)"
          >
            新品
          </li>
          <li :class="checkclass == 2 ? 'cheke' : ''" @click="sort('sales', 2)">
            销量
          </li>
          <li
            :class="checkclass == 3 ? 'cheke' : ''"
            @click="sort('commisson', 3)"
          >
            佣金
          </li>
          <li
            :class="checkclass == 4 ? 'cheke' : ''"
            s
            @click="sort('price', 4)"
          >
            价格
          </li>
        </ul>
        <el-table
          :data="goodslist"
          class="item"
          style="width: 100%"
          size="mini"
          @selection-change="addcart"
        >
          <el-table-column type="selection" width="80"> </el-table-column>
          <el-table-column label="商品图" min-width="80">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  :src="scope.row.image"
                  :preview-src-list="[scope.row.image]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="store_name" label="商品名称" min-width="200">
          </el-table-column>
          <el-table-column prop="price" label="商品售价" min-width="80">
          </el-table-column>
          <el-table-column prop="extension_one" label="佣金" min-width="80">
          </el-table-column>
          <el-table-column prop="sales" label="销量" min-width="80">
          </el-table-column>
          <el-table-column prop="stock" label="库存" min-width="80">
          </el-table-column>
        </el-table>
        <!-- 加入我的店家 -->
        <div class="addgoods">
          <div class="block">
            <el-pagination
              :page-sizes="[20, 40, 60, 80]"
              :page-size="where.limit"
              :current-page="where.page"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="pageChange"
            />
          </div>
        </div>
        <div class="loading" v-if="isjiazai">
          <div>
            <i class="el-icon-loading"></i>
            正在添加
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getsupplierlist,
  addgoods,
  getgoodscate,
  getsuppliergoodslist,
  getsupplieriofn,
} from "@/api/supplier";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      isjiazai: false,
      checkclass: 0,
      supplierclass: 0,
      supplierlist: [],
      suppliercate: [],
      goodslist: [],
      useriofn: [],
      idarr: [],
      value: "",
      sortPrice: true, //排序
      total: 0,
      where: {
        page: 1,
        limit: 20,
        cate_id: "",
        order: "",
        supplier_id: "",
      },
      supplierFrom: {
        page: 1,
        limit: 20,
        name: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getsupplier();
    this.getcate();
    this.getgoodslist();
    this.getiofn();
  },
  methods: {
    pageChange(page) {
      console.log(page);
      this.where.page = page;
      this.getgoodslist("");
    },
    handleSizeChange(val) {
      console.log(val);
      this.where.limit = val;
      this.getgoodslist("");
    },
    // 添加购物车
    addcart(val) {
      this.idarr = undefined;
      this.idarr = new Array();
      val.forEach((item) => {
        this.idarr.push(item.product_id);
      });
    },
    // 加入我的店
    addbtn() {
      let idarr = { product_id: "" };
      idarr.product_id = this.idarr
        .map((item) => {
          return item;
        })
        .join(",");
      if (!idarr.product_id > 0) {
        this.$message({
          showClose: true,
          message: "请选择商品！",
          type: "error",
        });
        return;
      }
      this.isjiazai = true;
      addgoods(idarr)
        .then((res) => {
          this.getgoodslist();
          this.idarr = undefined;
          this.idarr = new Array();
          this.all = false;
          this.isjiazai = false;
          if (res.status == 200) {
            this.$message({
              showClose: true,
              message: res.message,
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        })
        .catch((err) => {});
      this.getgoodslist();
    },

    //获得供应商信息
    getiofn() {
      getsupplieriofn()
        .then((res) => {})
        .catch((err) => {});
    },
    //获得供应商列表
    getsupplier(flag = 0) {
      getsupplierlist(this.supplierFrom)
        .then((res) => {
          this.supplierlist = res.data.list;
          if (flag == 1) {
            var supplier_ids = [];
            res.data.list.forEach((item) => {
              supplier_ids.push(item.mer_id);
            });
            this.where.supplier_id = supplier_ids.join(",");
            this.getgoodslist();
          }
        })
        .catch((err) => {});
    },
    //获得供应商商品
    suppliergoods(id) {
      this.where.supplier_id = id;
      this.supplierclass = id;
      this.getgoodslist();
    },
    //获得商品
    getgoodslist() {
      getsuppliergoodslist(this.where)
        .then((res) => {
          this.goodslist = undefined;
          this.goodslist = new Array();
          this.total = res.data.count;
          res.data.list.forEach((item) => {
            if (!item.is_added) {
              this.goodslist.push(item);
            }
          });
        })
        .catch((err) => {});
    },
    //排序
    sort(e, num) {
      this.checkclass = num;
      if (e === "price") {
        console.log(1);
        this.where.order = this.sortPrice ? "price_asc" : "price_desc ";
      } else {
        this.where.order = e;
      }
      this.getgoodslist();
    },
    //点击分类
    btncate(value) {
      let that = this;
      this.suppliercate.some((res) => {
        if (value == res.cate_name) {
          that.where.cate_id = res.store_category_id;
          return false;
        }
      });
      this.getgoodslist();
    },
    //获得分类
    getcate() {
      getgoodscate()
        .then((res) => {
          res.data.unshift({
            store_category_id: "",
            cate_name: "所有分类",
          });
          this.suppliercate = res.data;
        })
        .catch((err) => {
          uni.showToast({
            title: err,
          });
        });
    },
  },
};
</script>

<style lang='scss' scoped>
.loading {
  z-index: 99999;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  opacity: 0.7;
  div {
    position: absolute;
    top: 45%;
    left: 45%;
  }
}
.supplierclass {
  background-color: #f5f5f5;
  color: #1890ff;
}
.cheke {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}
.box {
  padding: 20px;
}
.supplier_store {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .head {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    .addgoods {
      cursor: default;
      padding-top: 20px;
      height: 80px;
      color: #fff;
      background-color: #1890ff;
      width: 80px;
      line-height: 20px;
      text-align: center;
      border-radius: 5px;
    }
    .addgoods:hover {
      background-color: rgb(51, 156, 255);
    }
  }
  .scroll-container {
    ::-webkit-scrollbar {
      height: 6px;
      background-color: #f5f5f5;
    }
    cursor: default;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    height: 80px;
    flex: 1;
    /deep/ {
      .el-scrollbar__bar {
        bottom: 0px;
      }
    }
    .item {
      display: inline-block;
      width: 100px;
      text-align: center;
      font-size: 14px;
      padding: 10px 0;
      img {
        width: 30px;
        height: 30px;
      }
      span {
        white-space: column;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
      }
    }
    .item:hover {
      color: #1890ff;
    }
  }
  .cate {
    .cate-head {
      cursor: default;
      display: inline-block;
      color: #606266;
      font-size: 14px;
      font-weight: 700;
      text-align: right;
      vertical-align: middle;
      line-height: 40px;
      width: 100px;
    }
    .scroll_cate {
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      width: 300px;
    }
    .item {
      display: flex;
      margin: 20px;
    }
  }
  .goods {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    ul {
      display: flex;
      flex-wrap: nowrap;
      list-style: none;
      li {
        cursor: default;
        text-align: center;
        flex: 1;
        height: 30px;
      }
    }
    .item {
      flex: 1;
      overflow: hidden;
      span {
        width: 50px;
        height: 50px;
      }
    }
    .addgoods {
      // position: absolute;
      // right: 0;
      // bottom: 0;
      padding: 0 20px 0 20px;
      width: 100%;
      height: 60px;
      display: flex;
      overflow: hidden;
      border-top: 1px solid #ccc;
      padding-top: 10px;

      .block {
        width: 300px;
      }
    }
  }
  .selWidth {
    width: 300px !important;
  }
}
</style>